import React from 'react';
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
import { StyleSheet, View, Text, ScrollView } from "react-native";
import { LiteCreditCardInput } from "@react-native-ohos/react-native-credit-card-input";

export const ReactNativeLiteCreditCardInputTest = () => {
  return (
    <ScrollView>
      <Tester style={{ flex: 1 }}>
        <TestSuite name="LiteCreditCardInputTest1">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中autoFocus属性，自动聚焦到当前用例框">
            <View>
              <LiteCreditCardInput autoFocus={true} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest2">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 onChange 属性，获取填写数据">
            <OnChange />
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest3">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 placeholders 属性，设置默认占位值">
            <View>
              <LiteCreditCardInput placeholders={{ number: "6666 8888 1234 5678", expiry: "12/24", cvc: "121" }} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest4">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 inputStyle 属性，设置文本框颜色为黄色">
            <View>
              <LiteCreditCardInput inputStyle={s.input} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest5">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 placeholderColor 属性设置 占位符的字体颜色为黄色">
            <View>
              <LiteCreditCardInput placeholderColor={"yellow"} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest6">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中onFocusField属性，当字段获得焦点时调用回调函数">
            <View>
              <OnFocus />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="LiteCreditCardInputTest7">
          <TestCase
            tags={['C_API']}
            itShould="LiteCreditCardInput中 style 属性，组件容器的自定义样式。">
            <View>
              <LiteCreditCardInput style={s.style} />
            </View>
          </TestCase>
        </TestSuite>
      </Tester>
    </ScrollView>
  );
};

function OnFocus() {
  const [field, setFocusing] = React.useState([])
  const _onFocus = (field) => {
    setFocusing(field)
  };

  return (
    <View>
      <LiteCreditCardInput onFocusField={_onFocus} />
      <Text>onFocusField:{field}</Text>
    </View>
  )
}

function OnChange() {
  const [formData, setFormData] = React.useState([])
  const _onChange = (formData) => {
    setFormData(formData)
  };
  return (<View>
    <LiteCreditCardInput onChange={_onChange} />
    <Text>number:{formData.values.number}</Text>
    <Text>expiry:{formData.values.expiry}</Text>
    <Text>cvc:{formData.values.cvc}</Text>
  </View>)
}

const s = StyleSheet.create({
  switch: {
    alignSelf: "center",
    marginTop: 20,
    marginBottom: 20,
  },
  container: {
    backgroundColor: "#F5F5F5",
    marginTop: 60,
  },
  label: {
    color: "yellow",
    fontSize: 12,
  },
  input: {
    fontSize: 16,
    color: "yellow",
  },
  inputContainerStyle: {
    borderBottomWidth: 10,
    borderBottomColor: "yellow",
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: 'yellow',
    borderRadius: 5,
    padding: 10,
    marginTop: 10,
  },
  style: {
    backfaceVisibility: 'hidden', // 背面是否可见
    backgroundColor: "#000000", // 背景颜色
    borderBlockColor: "#ffffff",
    borderBlockEndColor: "#ffffff",
    borderBlockStartColor: "#ffffff",
    borderBottomColor: "#ffffff",
    borderBottomEndRadius: '12',
    borderBottomLeftRadius: "11",
    borderBottomRightRadius: "13",
    borderBottomStartRadius: "14",
    borderColor: "#ffffff",
    // for android
    pointerEvents: 'none',
    isolation: 'auto',
    cursor: 'pointer',
    boxShadow: undefined,
    mixBlendMode: 'multiply'
  },
});